<template>
	<view class="lc-loading">
			<view v-if="status === 'loading'">
				<svg
					xmlns="http://www.w3.org/2000/svg"
					xmlns:xlink="http://www.w3.org/1999/xlink"
					style="margin:auto;background:#f8f8f8;display:block;"
					width="100px"
					height="100px"
					viewBox="0 0 100 100"
					preserveAspectRatio="xMidYMid"
				>
					<defs>
						<path id="path" d="M50 15A15 35 0 0 1 50 85A15 35 0 0 1 50 15" fill="none"></path>
						<path id="patha" d="M0 0A15 35 0 0 1 0 70A15 35 0 0 1 0 0" fill="none"></path>
					</defs>
					<g transform="rotate(0 50 50)"><use xlink:href="#path" stroke="#f1f2f3" stroke-width="3"></use></g>
					<g transform="rotate(60 50 50)"><use xlink:href="#path" stroke="#f1f2f3" stroke-width="3"></use></g>
					<g transform="rotate(120 50 50)"><use xlink:href="#path" stroke="#f1f2f3" stroke-width="3"></use></g>
					<g transform="rotate(0 50 50)">
						<circle cx="50" cy="15" r="9" fill="#ff0000">
							<animateMotion dur="1s" repeatCount="indefinite" begin="0s"><mpath xlink:href="#patha"></mpath></animateMotion>
						</circle>
					</g>
					<g transform="rotate(60 50 50)">
						<circle cx="50" cy="15" r="9" fill="#00ff00">
							<animateMotion dur="1s" repeatCount="indefinite" begin="-0.16666666666666666s"><mpath xlink:href="#patha"></mpath></animateMotion>
						</circle>
					</g>
					<g transform="rotate(120 50 50)">
						<circle cx="50" cy="15" r="9" fill="#0055ff">
							<animateMotion dur="1s" repeatCount="indefinite" begin="-0.3333333333333333s"><mpath xlink:href="#patha"></mpath></animateMotion>
						</circle>
					</g>
				</svg>
			</view>
			<view v-if="status === 'finished'">没有更多数据了</view>
			<view v-if="status === 'more'">上拉显示更多</view>
		</view>
</template>

<script>
	export default{
		name:"lc-loading",
		props:{
			'status':{
				default:'more',
				type:String
			}
		},
		data(){
			return{
				
			}
		}
	}
</script>

<style>
	.lc-loading{
		width: 100%;
		height: 100rpx;
		text-align: center;
		line-height: 300rpx;
	}
</style>